<template>
    <div class="container" :class="{haveBgi:status==2}">
      <div class="header">{{status==1?'访客详情':company+'访客'}}</div>
      <div class="subHeader" v-show="status==1||status==3">
        <div class="left">
          <van-uploader class="iconBox"  accept="image/*" :after-read="afterReadImgList2">
            <img class="icon" v-show="photo" :src="photo" alt="">
            <div class="moren" v-show="!photo">请上传头像</div>
            <div class="btn">更新人脸</div>
          </van-uploader>
          
        </div>
        <div class="right">
          <div class="info">
            <span>{{username}}-{{status==1?'待访问':'已访问'}}</span>
          </div>
          <div class="call">
            <span>{{mobile}}</span>
            <img :src="call" alt="">
          </div>
          <div class="remark">
            {{remark=='null'?'这里是备注信息的展示区域':remark}}
          </div>
        </div>
      </div>
      <div class="showInfo"  v-show="status==2">
        <div class="title">{{username}}</div>
        <div class="subTitle">欢迎到访</div>
        <div class="subTitle">{{company}}</div>
        <div class="userInfo">
          <div class="box">
            <van-uploader class="iconBox"  accept="image/*" :after-read="afterReadImgList2">
              <img class="icon" v-show="photo" :src="photo" alt="">
              <div class="moren" v-show="!photo"></div>
              <div class="txt"  v-show="!photo">请上传头像</div>
            </van-uploader>
            <div class="left">
              <img :src="shebei" class="left2" alt="">
            </div>
            <div class="content">
              <div class="up">智能通行</div>
              <div class="down">到访公司已开通智能人脸门禁上传人脸，即可体验智能通行</div>
            </div>
          </div>
        </div>
      </div>
      <div class="ul">
        <div class="li">
          <div class="left">
            <img :src="time" alt="">
          </div>
          <div class="right">
            <div class="name">到访时间</div>
            <div class="value">{{startTime}} ~ {{endTime}}</div>
          </div>
        </div>
        <div class="li">
          <div class="left">
            <img :src="person" alt="">
          </div>
          <div class="right">
            <div class="name">被访人</div>
            <div class="value">{{interviewee=='null'?'无':interviewee}}</div>
          </div>
        </div>
        <div class="li">
          <div class="left">
            <img :src="vistor" alt="">
          </div>
          <div class="right">
            <div class="name">来访目的</div>
            <div class="value">{{typeOut==1?'商务洽谈':'商务洽谈2'}}</div>
          </div>
        </div>
        <div class="li">
          <div class="left">
            <img :src="parter" alt="">
          </div>
          <div class="right">
            <div class="name">同行人数</div>
            <div class="value">{{personNum}}</div>
          </div>
        </div>
        <div class="li">
          <div class="left">
            <img :src="map" alt="">
          </div>
          <div class="right">
            <div class="name">到访地址</div>
            <div class="value">{{address}}</div>
          </div>
        </div>
      </div>
      <div class="btnBox" v-show="status==1" @click="status=3">
        <div class="btn">结束访问</div>
      </div>
    </div>
</template>
<script>
import $ from 'jquery'
// import moment from 'moment'
export default {
  data() {
    return {
      // baseUrl:"http://8.129.2.21:8086",
      baseUrl:"http://192.168.2.217:8086",//本地后台
      baseImgUrl:'/starr-web/images/',
      status:1,
      icon:require('../assets/header.png'),
      parter:require('../assets/parter.png'),
      time:require('../assets/time.png'),
      call:require('../assets/call.png'),
      map:require('../assets/map.png'),
      person:require('../assets/person.png'),
      vistor:require('../assets/vistor.png'),
      shebei:require('../assets/shebei.png'),
      id:'1',
      mid:'',
      interviewee:'',//被访人姓名
      username:'默认访客',//访客姓名
      mobile:'18888888888',
      company: '默认公司',
      startTime:'',
      endTime:'',
      address:'',//来访地址
      typeOut:'',//来访目的
      personNum:'0',//同行人数
      licensePlateNumber:'',//车牌号
      remark:"",
      photo:"",
      addressId:"",
    };
  },
  created () {
    document.title="访客详情"
    console.log('this.$router.params.mid',this.$route.params.mid)
    if(this.$route.params.mid){
      this.mid=this.$route.params.mid.replace(',','')
    }else{
      this.mid=103805
    }
    this.getVisitor(this.mid)
  },
  methods: {
    getVisitor(mid){
      let that=this
      $.ajax({
        url:`${that.baseUrl}/visitor/device/getVisitor`,
        type:'get',
        dataType:'json',
        data:{mid:mid},
        success:function (response) {
          console.log('response.data1',response)
          if(response.code===0){
            if(!response.data)return
            that.id=response.data.id
            that.addressId=response.data.areaId
            that.interviewee=response.data.interviewee
            that.username=response.data.realName
            that.mobile=response.data.phone
            if(response.data.visitorCompany=="null"){
              that.company="默认公司"
              console.log('that.company1',that.company)
            }else{
              that.company=response.data.visitorCompany
            }
            if(response.data.startTime){
              that.startTime=response.data.startTime
            }else{
              that.startTime="无"
            }
            if(response.data.endTime){
              that.endTime=response.data.endTime
            }else{
              that.endTime="无"
            }
            that.address=response.data.areaName
            that.typeOut=response.data.goal==1?'商务洽谈':''
            that.personNum=response.data.personNum
            that.licensePlateNumber=response.data.licensePlateNumber
            that.remark=response.data.remark
            if(response.data.photo){
              that.photo=that.baseImgUrl+response.data.photo
            }
            
          }else{
            that.showToast(response.msg);
          }
        },
        error:function (err) {
          console.log(err)
          // that.showToast('接口失败');
        }
      })
    },
    updateVisitor(data){
      let that=this
      // console.log('2434')
      $.ajax({
        url:`${that.baseUrl}/visitor/device/updateVisitor`,
        type:'post',
        dataType:'json',
        data:data,
        contentType: "multipart/form-data",
        // contentType: "application/json",
        processData: false,//用于对data参数进行序列化处理 这里必须false
        contentType: false, //必须*/
        success:function (response) {
          console.log('response.data1',response,response.data)
          if(response.code===0){
            that.$toast('头像更新成功');
            that.getVisitor(that.mid)
          }else{
            that.$toast(response.msg);
          }
        },
        error:function (err) {
          console.log(err)
          that.$toast('接口失败');
        }
      })
    },
    //附件上传
    afterReadImgList2(file) {
      // 此时可以自行将文件上传至服务器
      console.log('file2');
      console.log(file);
      let formData = new FormData();
      formData.append("id",this.id);
      formData.append("areaId",this.addressId);
      formData.append("areaName",this.address);
      formData.append("mid",this.mid);
      formData.append("interviewee",this.interviewee);
      formData.append("realName",this.username);
      formData.append("phone",this.mobile);
      formData.append("visitorCompany",this.interviewee);
      formData.append("startTime",this.startTime);
      formData.append("endTime",this.endTime);
      formData.append("address",this.address);
      formData.append("goal",this.typeOut=='商务洽谈'?1:0);
      formData.append("remark",this.remark);
      formData.append("file",file.file);
      console.log('formData',file.file,this.id);
      this.updateVisitor(formData)
    },
  },
};

</script>
<style lang="scss" scoped>
.container{
  background-color: #f5f5f5;
  padding-bottom: 70px;
  // min-height: 100%;
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
  &.haveBgi{
    background: url("../assets/bgi.png") no-repeat;
    background-size: 100% 100%;
    .header{
      // background-color: transparent;
      // border-bottom: 1px solid #fff;
    }
    .showInfo{
      background-color: transparent;
    }
    .ul{
      background-color: transparent;
    }
  }
  .header{
    font-size: 20px;
    height: 50px;
    line-height: 50px;
    font-weight: bold;
    background-color: #fff;
    margin-bottom: 20px;
  }
  .subHeader{
    display: flex;
    background-color: #fff;
    padding: 10px 0 4px;
    .left{
      width: 60px;
      margin: 0 15px;
      img{
        border-radius: 8px;
        width: 60px;
        height: 60px;
        display: block;
        margin-bottom: 10px;
      }
      .btn{
        border-radius: 4px;
        width: 60px;
        height: 20px;
        font-size: 12px;
        margin-bottom: 10px;
        border: 1px solid #51b1f6;
        color:#51b1f6;
      }
      .moren{
        margin-bottom: 10px;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 10px;
        box-sizing: border-box;
        background-color: #f5f5f5;
      }
    }
    .right{
      flex: 1;
      text-align: left;
      .info{
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 6px;
        span{

        }
      }
      .call{
        margin-bottom: 20px;
        span{
          font-size: 16px;
          color:#51b1f6;
        }
        img{
          border-radius:50%;
          width: 20px;
          height: 20px;
          display:inline-block;
          vertical-align: middle;
          margin-top: -6px;
          margin-left: 10px;
        }
      }
      .remark{
        font-size: 14px;
      }
    }
  }
  .showInfo{
    text-align: left;
    padding: 0 15px;
    box-sizing: border-box;
    background-color: #f5f5f5;
    .title{
      font-size: 20px;
      margin-bottom: 14px;
    }
    .subtitle{
      font-size: 16px;
      margin-bottom: 10px;
    }
    .userInfo{
      padding-top: 80px;
      .box{
        position: relative;
        background-color: #fff;
        height: 210px;
        padding:100px 30px 0;
        box-sizing: border-box;
        display: flex;
        border-radius: 8px;
        .iconBox{
          position: absolute;
          top:0;
          width: 160px;
          height: 160px;
          border-radius: 50%;
          left:50%;
          border: 2px solid #333;
          transform: translate(-50%,-50%);
          .icon{
            width: 160px;
            height: 160px;
            border-radius: 50%;
            display: block;
          }
          .txt{
            position: absolute;
            top:20%;
            left:50%;
            font-size: 16px;
            color:#5bb4f2;
            width: 50px;
            text-align: center;
            transform: translateX(-50%);
          }
          .moren{
            width: 160px;
            height: 160px;
            border-radius: 50%;
            display: block;
            background-color: #f5f5f5;
          }
        }
        .left{
          width: 50px;
          height: 90px;
          margin-right: 10px;
          border-radius: 10px;
          background-color: #f5f5f5;
          img{
            width: 40px;
            height: 80px;
            display: block;
            margin: 0 auto;
            margin-top: 5px;
          }
        }
        .content{
          flex:1;
          .up{
            font-size: 16px;
            margin-bottom: 20px;
          }
          .down{
            font-size: 14px;
          }
        }
      }
    }
  }
  .ul{
    background-color: #f5f5f5;
    text-align: left;
    padding: 20px 10px;
    box-sizing: border-box;
    .li{
      display: flex;
      margin-bottom: 10px;
      .left{
        width: 40px;
        margin-right: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        img{
          height: 24px;
          width: 24px;
          display: block;
        }
      }
      .right{
        flex: 1;
        .name{
          color:#666;
          font-size: 14px;
        }
        .value{
          color:#333;
          font-size: 16px;
        }
      }
    }
  }
  
  .btnBox{
    position: fixed;
    left: 0;
    bottom: 20px;
    
    width: 100%;
    height: 50px;
    .btn{
      margin: 0 auto;
      width: 92%;
      height: 50px;
      color:#666;
      font-size: 16px;
      background-color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>